<template>
  <div class="content-box">
    <div class="scroll-view-box">
      <div class="data-box-left">
        <div class="user-title-box">项目信息</div>
        <el-descriptions class="margin-bottom" :column="1" border>
          <el-descriptions-item label="项目名称" >
            kooriookami
          </el-descriptions-item>
          <el-descriptions-item label="项目编号" >
            kooriookami
          </el-descriptions-item>
          <el-descriptions-item label="项目品牌" >
            kooriookami
          </el-descriptions-item>
          <el-descriptions-item label="项目类型" >
            kooriookami
          </el-descriptions-item>
        </el-descriptions>
        <div class="user-title-box">增减项信息</div>
        <el-descriptions class="margin-bottom" :column="1" border>
          <el-descriptions-item label="增减类型" >
            kooriookami
          </el-descriptions-item>
          <el-descriptions-item label="增减内容" >
            kooriookami
          </el-descriptions-item>
          <el-descriptions-item label="施工内容说明" >
            kooriookami
          </el-descriptions-item>
          <el-descriptions-item label="预计开工日期" >
            kooriookami
          </el-descriptions-item>
          <el-descriptions-item label="预计完工日期" >
            kooriookami
          </el-descriptions-item>
          <el-descriptions-item label="预计工期" >
            kooriookami
          </el-descriptions-item>
          <el-descriptions-item label="增减项原因" >
            kooriookami
          </el-descriptions-item>
          <el-descriptions-item label="创建时间" >
            kooriookami
          </el-descriptions-item>
          <el-descriptions-item label="附件" >
            <div class="file-box-img-box flex ac">
              <div class="file-box-img">
                <img class="img" />
              </div>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="备注" >
            kooriookami
          </el-descriptions-item>
        </el-descriptions>
        <div class="user-title-box">增减项报价</div>
        <el-descriptions class="margin-bottom" :column="1" border>
          <el-descriptions-item label="增减项金额" >
            <div class="item-box" @click="zjxPrice = !zjxPrice">
              <span class="title">20000元</span>
              <i :class="zjxPrice ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"></i>
            </div>
          </el-descriptions-item>
          <template v-if="zjxPrice">
            <el-descriptions-item label="基础装修费" labelClassName="labelClassName2" 2">
              kooriookami
            </el-descriptions-item>
            <el-descriptions-item label="主材采购费" labelClassName="labelClassName2" 2">
              kooriookami
            </el-descriptions-item>
            <el-descriptions-item label="税金" labelClassName="labelClassName2" 2">
              kooriookami
            </el-descriptions-item>
          </template>
          <el-descriptions-item label="成本金额" >
            <div class="item-box" @click="cbPrice = !cbPrice">
              <span class="title">20000元</span>
              <i :class="cbPrice ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"></i>
            </div>
          </el-descriptions-item>
          <template v-if="cbPrice">
            <el-descriptions-item label="现场采购成本" labelClassName="labelClassName2" 2">
              kooriookami
            </el-descriptions-item>
            <el-descriptions-item label="公司集采成本" labelClassName="labelClassName2" 2">
              kooriookami
            </el-descriptions-item>
            <el-descriptions-item label="管理成本" labelClassName="labelClassName2" 2">
              kooriookami
            </el-descriptions-item>
          </template>
          <el-descriptions-item label="利润金额" >
            kooriookami
          </el-descriptions-item>
          <el-descriptions-item label="报价时间" >
            kooriookami
          </el-descriptions-item>
          <el-descriptions-item label="报价失效" >
            kooriookami
          </el-descriptions-item>
          <el-descriptions-item label="报价附件" >
            <div class="file-box-img-box flex ac">
              <div class="file-box-img">
                <img class="img" />
              </div>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="成本附件" >
            <div class="file-box-img-box flex ac">
              <div class="file-box-img">
                <img class="img" />
              </div>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="利润附件" >
            <div class="file-box-img-box flex ac">
              <div class="file-box-img">
                <img class="img" />
              </div>
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="data-box-list-right">
        <div class="user-title-box">项目信息</div>

        <el-timeline class="timeline">
          <el-timeline-item v-for="(item, index) in logList" :key="index">
            <div class="setp-box">
              <div class="setp-top flex ac jb">
                <p class="time">{{ item.updated_at || '12213' }}</p>
                <div class="user-box flex ac">
                  <img class="avater" :src="item.handlers_image" />
                  {{ item.handlers_name + "-" + item.handlers_position }}
                </div>
              </div>
              <div class="setp-content">
                <div class="title">
                  （管理员回退该记录已废弃）
                </div>
                <!-- 对客日志 -->
                <template v-if="index == 0">
                  <div class="content-table">
                    <div class="flex jb fw">
                      <div class="table-item width-50">
                        <span class="table-item-title">进展描述</span>
                        <span class="table-item-content">{{
                          item.remark || "--"
                        }}</span>
                      </div>
                      <div class="table-item width-50">
                        <span class="table-item-title">进展描述</span>
                        <span class="table-item-content">{{
                          item.remark || "--"
                        }}</span>
                      </div>
                    </div>
                    <div class="table-item">
                      <span class="table-item-title">日志图片</span>
                    </div>
                    <div class="img-list-box flex ac fw">
                      <img @click="$fileViewHandle(file)" v-for="(file, index) in 1" :key="index" class="img"
                        :src="file.file_url" />
                    </div>
                  </div>
                </template>
                <template v-if="index == 1">
                  <div class="content-table">
                    <div class="flex jb fw">
                      <div class="table-item width-50">
                        <span class="table-item-title">预计开工日期</span>
                        <span class="table-item-content">11</span>
                      </div>
                      <div class="table-item width-50">
                        <span class="table-item-title">报价类型</span>
                        <span class="table-item-content">

                          <template>增减项施工报价</template>
                        </span>
                      </div>
                      <div class="table-item">
                        <span class="table-item-title">备注描述</span>
                        <span class="table-item-content">sdf</span>
                      </div>
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </el-timeline-item>
        </el-timeline>

      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      zjxPrice: false,
      cbPrice: false,
      logList: [1, 2]
    };
  },
  computed: {

  },
  mounted() { },
  methods: {

  },
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
@import '@/styles/detailFlex.scss';
</style>
<style lang="scss">
.labelClassName {
  width: 160px;
  background: #f5f8fe !important;
  text-align: center !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.contentClassName {
  font-weight: 400 !important;
  font-size: 17px !important;
  color: #1b2431 !important;
  padding-left: 20px !important;
}

.labelClassName2 {
  width: 160px;
  background: rgba(0, 0, 0, 0) !important;
  text-align: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  border: none !important;
}

.contentClassName2 {
  font-weight: 400 !important;
  font-size: 17px !important;
  color: #1b2431 !important;
  padding-left: 20px !important;
  border: none !important;
}
</style>